<template>
  <div>
    <el-tabs
      class="customer-tab"
      type="card"
      @tab-click="jump"
      v-model="tabName"
    >
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :name="tab.refName"
        :key="tab.refName"
        :label="tab.name"
      ></el-tab-pane>
    </el-tabs>
    <div
      class="scroll-content"
      @scroll="onScroll"
      :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height "
    >
      <!-- 每一个tab -->
      <div v-for="tab in tabs"
           :ref="tab.refName"
           class="scroll-item"
           :key="tab.refName"
      >
        <div class="line-name">
          <div class="tabTitle">{{ tab.name }}</div>
        </div>
<!--        地图-->
        <div v-if="tab.refName==='spatialInfo'">
        </div>
        <div  style="height: 60px;font-size: 16px;" v-for="item in tab.info" :key="item.name">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="grid-content  gctitle">{{ item.name }}：</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content gcvalue">{{ item.value }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MapComp from '@/components/Map/mapComp'
export default {
  name: 'hisProDetail',
  props: {
    proDetail: {
      type: Object
      // default() {
      //   return {}
      // }
    }
  },
  components: { MapComp },
  data() {
    return {
      tabIndex: '0',
      tabs: [
        {
          name: '基本信息',
          refName: 'basicInfo',
          info: {}
        },
        {
          name: '工程信息',
          refName: 'engineInfo', info: {}
        },
        {
          name: '投资信息',
          refName: 'investmentInfo', info: {}
        },
        {
          name: '建设信息',
          refName: 'constructionInfo', info: {}
        },
      ],
      contentStyleObj: {
        height: '100px'
      },
      tabName: '基本信息',
      fieldArray_ch: [
        { 'f_field': 'xmbh', 'f_fieldcn': '项目编号' },
        { 'f_field': 'xmmc', 'f_fieldcn': '项目名称' },
        { 'f_field': 'xmzgbm', 'f_fieldcn': '项目主管部门' },
        { 'f_field': 'gbzntjsyear', 'f_fieldcn': '所属年度' },
        { 'f_field': 'xmsheng', 'f_fieldcn': '项目所在省' },
        { 'f_field': 'xmshi', 'f_fieldcn': '项目所在市' },
        { 'f_field': 'xmxian', 'f_fieldcn': '项目所在县' },
        { 'f_field': 'beizhu', 'f_fieldcn': '备注' },

        { 'f_field': 'yswjmc', 'f_fieldcn': '验收文件名称' },
        { 'f_field': 'yswjwh', 'f_fieldcn': '验收文件文号' },
        { 'f_field': 'ysrq', 'f_fieldcn': '验收日期' },
        { 'f_field': 'jsddys', 'f_fieldcn': '建设地点（验收）' },
        { 'f_field': 'xmqgdzbys', 'f_fieldcn': '项目区拐点坐标' },
        { 'f_field': 'gbzntgdzb', 'f_fieldcn': '高标准农田拐点坐标' },

        { 'f_field': 'ztzys', 'f_fieldcn': '总投资（万元）' },
        { 'f_field': 'shtzys', 'f_fieldcn': '社会投资（万元）' },
        { 'f_field': 'zytzys', 'f_fieldcn': '中央投资（万元）' },
        { 'f_field': 'dftzys', 'f_fieldcn': '地方投资（万元）' },

        { 'f_field': 'jsgmys', 'f_fieldcn': '建设规模（亩）' },
        { 'f_field': 'gbzntjcmjys', 'f_fieldcn': '高标准农田建成面积（亩）' },
        { 'f_field': 'xzgdmjys', 'f_fieldcn': '新增耕地面积（亩）' },
        { 'f_field': 'xzgxjsggmj', 'f_fieldcn': '新增高效节水灌溉面积（亩）' },
        { 'f_field': 'jcgnzntzldj', 'f_fieldcn': '建成高标准农田质量等级' }

      ],
      infoClaity: {
        basicInfo: [{ 'code': 'xmbh' }, { 'code': 'xmmc' }, { 'code': 'xmzgbm' }, { 'code': 'gbzntjsyear' }, { 'code': 'xmsheng' }, { 'code': 'xmshi' }, { 'code': 'xmxian' }],
        engineInfo: [{ 'code': 'yswjmc' }, { 'code': 'yswjwh' }, { 'code': 'ysrq' }, { 'code': 'jsddys' }, { 'code': 'xmqgdzbys' }, { 'code': 'gbzntgdzb' }, { 'code': 'beizhu' }],
        investmentInfo: [{ 'code': 'ztzys' }, { 'code': 'shtzys' }, { 'code': 'zytzys' }, { 'code': 'dftzys' }],
        constructionInfo: [{ 'code': 'jsgmys' }, { 'code': 'gbzntjcmjys' }, { 'code': 'xzgdmjys' }, { 'code': 'xzgxjsggmj' }, { 'code': 'jcgnzntzldj' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getHight()
    window.addEventListener('resize', this.getHight)
    // this.getCurrentProDetails(this.proDetail)
  },
  mounted() {
    // this.getCurrentProDetails(this.proDetail)
  },
  destroyed() {
    window.removeEventListener('resize', this.getHight)
  },
  methods: {
    getCurrentProDetails(curpro) {
      for (let i in this.tabs) {
        let item = this.tabs[i]
        this.tabs[i].info = []
        for (let j in this.infoClaity[item.refName]) {
          let fcontext = this.infoClaity[item.refName][j].code
          let field_ch = this.fieldArray_ch.find((item, index) => {
            return item.f_field == fcontext.toLowerCase()
          })
          this.tabs[i].info.push({ name: field_ch.f_fieldcn, value: curpro[fcontext] })
          // this.tabs[i].info[field_ch.f_fieldcn] = curpro[fcontext]
        }
      }
    },
    jump(tab, event) {
      let target = document.querySelector('.scroll-content')
      let scrollItems = document.querySelectorAll('.scroll-item')
      // 判断滚动条是否滚动到底部
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.tabIndex = tab.index.toString()
      }
      let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
      let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
      // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
      // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
      // 计算每一小段的距离
      let step = totalY / 10
      if (totalY > distance) {
        smoothDown(document.querySelector('.scroll-content'))
      } else {
        let newTotal = distance - totalY
        step = newTotal / 10
        smoothUp(document.querySelector('.scroll-content'))
      }

      // 参数element为滚动区域
      function smoothDown(element) {
        if (distance < totalY) {
          distance += step
          element.scrollTop = distance
          setTimeout(smoothDown.bind(this, element), 10)
        } else {
          element.scrollTop = totalY
        }
      }

      // 参数element为滚动区域
      function smoothUp(element) {
        if (distance > totalY) {
          distance -= step
          element.scrollTop = distance
          setTimeout(smoothUp.bind(this, element), 10)
        } else {
          element.scrollTop = totalY
        }
      }
    },
    // 滚动条滚动
    onScroll(e) {
      let scrollItems = document.querySelectorAll('.scroll-item')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400
        if (judge) {
          this.tabIndex = i.toString()
          // 找对应的tab-name值
          this.tabName = this.tabs[this.tabIndex].refName
          break
        }
      }
    },
    getHight() {
      this.contentStyleObj.height = window.innerHeight - 190 + 'px'
    }
  }
}
</script>

<style lang="scss" scoped>

.tabTitle {
  font-size: 24px;
  padding: 20px;
}

.bg-purple {
  //background: #d3dce6;
}

.gcvalue {
  top: 2px;
  position: absolute;
  padding-right: 15px;
}

.gctitle {
  float: right;
}

.grid-content {
  border-radius: 4px;
  //min-height: 50px;

}

::v-deep.customer-tab {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  padding: 4px;
}

::v-deep.el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin: 0;

  .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    border: none;

    .el-tabs__item {
      width: 25%;
      text-align: center;
      border: none;
    }

    .is-active {
      border-radius: 4px;
      background-color: #34BD00FF;
      color: #fff;
    }
  }
}

</style>
